<template>
  <van-tabbar v-model="active" route>
    <van-tabbar-item name="home" icon="wap-home-o" to="/home">首页</van-tabbar-item>
    <van-tabbar-item name="catagory" icon="apps-o" to="/catagory">分类</van-tabbar-item>
    <van-tabbar-item name="cart" icon="shopping-cart-o" to="/cart" :badge="badge"
      >购物车</van-tabbar-item
    >
    <van-tabbar-item name="mine" icon="user-o" to="/mine">我的</van-tabbar-item>
  </van-tabbar>
</template>
<script setup>
import { ref, computed, onMounted } from "vue";
import { useStore } from "vuex";
const active = ref("home");
const store = useStore();
onMounted(() => {
  if (localStorage.getItem("token")) {
    store.dispatch("updateCart");
  }
});
const badge = computed(() => {
  const count = store.state.count;
  return count ? count : null;
});
</script>
